<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>寄养家庭</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/stylesheets/foster.css">
    <!--从头开始-->
</head>
<body>
<%include nav.html%>
<form id="apply_foster" method="post">
    <div class="foster_container">
        <div class="foster_body">
            <div class="foster_nav">
                申请成为寄养家庭
            </div>
            <div class="foster_cent">
                <div class="foster_u">
                        <div class="foster_list">
                            <span>家庭名称：</span>
                            <!--提交家庭名称-->
                            <input type="text" placeholder="拥有独特的家庭名称是成功的一半" id="user_shop_name" name="user_shop_name">
                        </div>
                        <div class="foster_list">
                            <span>家庭介绍：</span>
                            <!--提交家庭简介-->
                            <textarea cols="60" rows="5" placeholder="详细的家庭介绍，会让宠物主人好感度UP" id="shop_content" name="shop_content"></textarea>
                        </div>
                        <div class="foster_list">
                            <span>家庭地址：</span>
                        <span id="province">
                                <select class="sel_pro"></select>
                                <select class="sel_city"></select>
                                <select class="sel_street"></select>
                        </span>
                            <!-- 提交地址-->
                            <input type="text" hidden id="address"  name="user_address">
                        </div>
                        <!--第一次图片上传-->
                        <!-------------------------这里向t_image表更新image-------------------->
                        <div class="foster_list">
                            <span>家庭环境照片：</span>
                            <div class="foster_picture">
                                <input type="file" id="file1" name="file1">
                            </div>
                            <div class="Picture_preview">
                                <img src="" alt="" id="img1" class="preview_img_size">
                            </div>
                        </div>
                        <!------------------------------------end------------------------------------>
                        <div class="foster_list">
                            <span>养宠经验：</span>
                            <textarea cols="60" rows="5" placeholder="详细的家庭介绍，会让宠物主人好感度UP" name="shop_express"></textarea>
                        </div>
                </div>
            </div>

            <div class="foster_cent">
                <div class="foster_u" id="service_checked">
                    <h3>寄养服务</h3>
                        <div class="foster_select">
                            <span><input type="checkbox" checked>&nbsp;&nbsp;猫：</span>
                            <input type="text" placeholder="20" name="cat_service" required>  元/日
                        </div>
                        <div class="foster_select">
                            <span><input type="checkbox" checked>&nbsp;&nbsp;狗：</span>
                            <input type="text" placeholder="20" name="dog_service" required>  元/日
                        </div>
                        <div class="foster_select">
                            <span><input type="checkbox" checked>仓鼠：</span>
                            <input type="text" placeholder="20" name="mouse_service" required>  元/日
                        </div>
                </div>
            </div>

            <div class="foster_cent">
                <div class="foster_u">
                    <h3>实名认证</h3>
                        <div class="foster_list">
                            <span>真实姓名：</span>
                            <!------------------------------提交真实姓名----------------------------->
                            <input type="text" placeholder="请输入身份证上的真实名字" name="realname" id="realname">
                        </div>
                        <div class="foster_list">
                            <span>身份证号码：</span>
                            <!---------------------------提交身份证号码----------------------------->
                            <input type="text" placeholder="身份证号码必须和上传的照片一致" name="idcard" id="idcard">
                        </div>
                        <!--第二次图片上传-->
                        <!---------------------这里向t_shop表更新idcardpic---------------->
                        <div class="foster_list">
                            <span>身份证照片：</span>
                            <div class="card_pictures">
                                <div class="card_font">上传手持身份证照片</div>
                                <div class="card_picture1">
                                    <input type="file" id="file2" name="file2">
                                </div>
                                <div class="Picture_preview">
                                    <img src="" alt="" id="img2" class="preview_img_size">
                                </div>
                            </div>
                        </div>
                        <!----------------------------------end---------------------------------->
                </div>
            </div>

            <div class="foster_cent">
                <div class="foster_u">
                    <div class="foster_list">
                        <span>&nbsp;&nbsp;&nbsp;</span>
                        <input type="submit" class="btn btn_foster" id="btn_foster3" value="提交申请信息"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="height:50px"></div>
</form>
<!--底部导航-->
<%include footer.html%>
<!--<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>-->
<script src="/js/jquery-1.8.3.js"></script>
<script src="/javascripts/three-sports.js"></script>
<script>
    $(function () {
        $('#file1').click(function () {
            $('#file1').css('background-color','white');
        });
        $("#file1").change(function(){
            var objUrl = getObjectURL(this.files[0]) ;
            console.log("objUrl = "+objUrl) ;
            if (objUrl) {
                $("#img1").attr("src", objUrl) ;
            }
        }) ;
        $("#file2").change(function(){
            var objUrl = getObjectURL(this.files[0]) ;
            console.log("objUrl = "+objUrl) ;
            if (objUrl) {
                $("#img2").attr("src", objUrl) ;
            }
        }) ;
        $('#service_checked').change(function(){
            $('.foster_select').each(function(){
                if($(this).find('input[type=checkbox]').is(':checked')){
                    $(this).find('input[type=text]').attr("disabled",false);
                }else{
                    $(this).find('input[type=text]').attr("disabled",true);
                }
            });
        });
        $('#apply_foster').submit(function () {
            if($('.sel_city:visible').val()==undefined){
                $('#address').val(
                        $('.sel_pro:visible').val()+$('.sel_street:visible').val()
                );
            }else{
                $('#address').val(
                        $('.sel_pro:visible').val()+$('.sel_city:visible').val()+$('.sel_street:visible').val()
                );
            }
            var checkedno=0;
            $('.foster_select').each(function(){
                if($(this).find('input[type=checkbox]').is(':checked')){checkedno++;}
            });
            if(checkedno==0){
                alert('至少提供一项服务');
                return false;
            }else{
                if($('#user_shop_name').val()==''){
                    alert('家庭名称不能为空');
                    return false;
                }else{
                    if($('#shop_content').val()==''){
                        alert('家庭介绍不能为空');
                        return false;
                    }else{
                        if($('#img1').attr('src')==''){
                            alert('请添加家庭环境图片');
                            return false;
                        }else{
                            if($('#realname').val()==''){
                                alert('请填写真实姓名');
                                return false;
                            }else{
                                if($('#img2').attr('src')==''){
                                    alert('请添加手持身份证照片');
                                    return false;
                                }else{
                                    if(isCardNo($('#idcard').val())){
                                        return false;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            var formdata=new FormData($('#apply_foster')[0]);
            $.ajax({
                type: 'POST',
                url: '/foster/apply',
                data:formdata,
                async:false,
                cache:false,
                contentType:false,
                processData:false,
                success: function (data) {
                    if(data.res=="1"){
                        location.href='/users/foster';
                    }
                },
                error: function (data) {
                    alert(data);
                }
            });
            return false;
        });
    });

    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    function isCardNo(card)
    {
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(reg.test(card) === false)
        {
            alert("身份证输入不合法");
            return true;
        }else {
            return false;
        }
    }
</script>
</body>
</html>